<template>
  <div class="login_bg">
    <div class="fill"></div>
    <!-- 登录框 -->
    <div class="login_box">
      <div class="logo"></div>
      <div class="login">

        <!-- 账号登录框 -->
        <Form ref="formInline" :model="form" :rules="login_ruleValidate">
          <FormItem label="账号" prop="name">
            <Input type="email" size="large" v-model="form.name" placeholder="Username">
            </Input>
          </FormItem>
          <FormItem label="密码" prop="password">
            <Input type="password" size="large" v-model="form.password" placeholder="Password">
            </Input>
          </FormItem>
          <div class="operations">
            <div class="item">
              <Button type="success" long @click="login_box=true">没有账号,点击这里注册</Button>
            </div>
            <div class="item">
              <Button type="error" long @click="forget_box=true">登陆遇到问题,点击这里重置密码</Button>
            </div>
          </div>
          <div class="login_btn">
            <Button size="large" type="primary" long @click="handleSubmit('formInline')">登录</Button>
          </div>
        </Form>
      </div>
    </div>

    <!-- 注册账号弹出框 -->
    <Modal v-model="login_box" width="500">
      <p slot="header" style="color:#009966;text-align:center">
        <Icon type="md-person-add"/>
        <span>注册账号</span>
      </p>
      <div style="text-align:center">
        <Form :model="reg_form" ref="reg" :rules="reg_ruleValidate">
          <FormItem label="电子邮箱地址" prop="mail">
            <Input type="email" size="large" v-model="reg_form.mail" placeholder="请输入用户邮箱"/>
          </FormItem>
          <FormItem label="密码" prop="password">
            <Input type="password" size="large" v-model="reg_form.password" placeholder="请输入用户密码"/>
          </FormItem>
          <FormItem label="确认密码">
            <Input type="password" size="large" v-model="reg_form.rePassword" placeholder="请输入确认密码"/>
          </FormItem>
          <FormItem label="邮箱验证码" v-show="show_code" prop="code">
            <Input type="number" size="large" v-model="reg_form.code" placeholder="请输入邮箱验证码"/>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <div class="operations">
          <div class="item">
            <Button type="success" size="large" long :loading="login_loading" @click="to_login()">{{reg_msg}}</Button>
          </div>
          <div class="item">
            <Button type="error" size="large" long @click="close_login()">关闭</Button>
          </div>
        </div>
      </div>
    </Modal>

    <!--  忘记密码弹出框 -->
    <Modal v-model="forget_box" width="500" :closable="false" :mask-closable="false">
      <p slot="header" style="color:#FF6666;text-align:center">
        <Icon type="ios-unlock"/>
        <span>重置密码</span>
      </p>
      <div style="text-align:center">
        <Form :model="forget_form" ref="forget" :rules="forget_ruleValidate">
          <FormItem label="电子邮箱地址" prop="mail">
            <Input type="email" size="large" v-model="forget_form.mail" placeholder="请输入用户邮箱"/>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <div class="operations">
          <div class="item">
            <Button type="success" size="large" long @click="to_forget()">{{forget_msg}}</Button>
          </div>
          <div class="item">
            <Button type="error" size="large" long @click="closeBtn()">关闭</Button>
          </div>
        </div>
      </div>
    </Modal>

  </div>
</template>

<script>
  export default {
    name: "login",
    data: () => ({
      form: {
        name: '',
        password: ''
      },
      reg_form: {
        mail: '',
        password: '',
        rePassword: '',
        code: ''
      },
      forget_form: {
        mail: ''
      },
      login_box: false,
      login_loading: false,
      reg_msg: '获取邮箱验证码',
      show_code: false,
      forget_box: false,
      forget_msg: '获取邮箱验证码',
      login_ruleValidate: {
        name: [
          {required: true, message: '账号不能为空', trigger: 'blur'},
          {type: 'email', message: '账号必须是邮箱格式', trigger: 'blue'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {type: 'string', min: 8, message: '密码不能小于8位', trigger: 'blue'}
        ]
      },
      reg_ruleValidate: {
        mail: [
          {required: true, type: 'email', message: '账号不符合要求,不能为空,且为邮箱格式', trigger: 'blur'}
        ],
        password: [
          {required: true, type: 'string', min: 8, max: 16, message: '密码不能为空,且最少8位长度,最大16位长度', trigger: 'blur'}
        ]
      },
      forget_ruleValidate: {
        mail: [
          {required: true, type: 'email', message: '账号不符合要求,不能为空,且为邮箱格式', trigger: 'blur'}
        ]
      }
    }),
    methods: {
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let params = {
              mail: this.form.name,
              password: this.$commonUtil.md5_encode(this.form.password)
            };
            this.$axios.postJson("/userLogin", params).then(res => {
              if (res.code === 200) {
                this.$Message.success("登录成功")
                this.$commonUtil.saveToken(res.data)
                this.$router.push("/")
              } else {
                this.$Message.error("登录失败")
              }
            }).catch(e => {
              this.$Message.error("服务器异常")
            })
          } else {
            return false;
          }
        })
      },
      reg() {
        this.$axios.get("http://127.0.0.1:8081/two").then(res => {

        })
      },
      to_login() {
        this.show_code = true
        this.reg_msg = "点击注册"
      },
      to_forget() {
        if (this.forget_num > 2) {
          return false
        } else {
          this.forget_num += 1
        }
      },
      test() {
        alert(1)
      },
      closeBtn() {
        this.forget_box = false
        this.forget_num = 0
      },
      close_login() {
        this.login_box = false
        this.show_code = false
      }
    }
  }
</script>

<style scoped>
  .fill {
    width: 1px;
    height: 1px;
  }

  .login_bg {
    width: 100%;
    height: 98vh;
    background: url("../assets/login_bg.jpg") 100% 100%;
  }

  .login_box {
    width: 600px;
    height: 500px;
    margin: 100px 100px;
  }

  .logo {
    width: 600px;
    height: 200px;
    background-image: url("../assets/logo.jpg");
    background-size: 100% 100%;
  }

  .login {
    width: 600px;
    height: 350px;
    margin-top: 30px;
  }

  .operations {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .item {
    width: 49%;
    height: 100%;
  }

  .login_btn {
    margin-top: 20px;
  }

</style>
